<!--搜索组件-文本域-->		
<div style='margin:0 0 10px 0;height:30px;border:0px solid;display:flex'>
	<div style='float:left;width:85px;line-height:20px;background:#8d8;border:0px solid #8d8;text-align:center;padding:1px'>
		<select id='search_text_type' style='cursor:pointer;height:100%;width:100%;border:1px solid #8d8;text-align:center;appearance:none;-moz-appearance:none;-webkit-appearance:none;'>
			<volist name='search_text' id='vo' item='key'>
				<option value='{$key}'>{$vo}</option>
			</volist>
			<option value='0'>不限</option>
		</select>
	</div>
	<div style='float:left;flex:1;border:1px solid #8d8'>
		<input name='search_text_content' style='height:100%;width:100%;' />
	</div>
	<div id='IndexMain_SearchButton' style='float:left;width:70px;line-height:30px;background:#8d8;text-align:center;cursor:pointer;'>
		搜索
	</div>
</div>
<script>
	//搜索框组
	$('#IndexMain_SearchButton').click(function(){
		var SearchText_Type = $('#search_text_type').val();
		var SearchText_Content = $('input[name=search_text_content]').val().trim();
		sessionStorage.condition_SearchText_Type = SearchText_Type;
		sessionStorage.condition_SearchText_Content = SearchText_Content;
		sessionStorage.condition_pnow=1;
		sessionStorage.condition_search_nav=0;
		sessionStorage.condition_area='';
		sessionStorage.condition_class='';
		sessionStorage.condition_price='';
		index_init();
	});

	//如果有条件缓存
	if(sessionStorage.condition_SearchText_Type){	
		//获取缓存
		var SearchText_TypeVal = sessionStorage.condition_SearchText_Type;
		//遍历所有option
		for(var i=0;i<$('#search_text_type').get(0).options.length;i++){
			//获取每个option的value值 
			var SearchText_OptionVal = $('#search_text_type').get(0).options[i].value;
			//如果option的value值等于缓存
			if(SearchText_OptionVal == SearchText_TypeVal){
				//设置该下标的选项为默认
				$('#search_text_type').get(0).selectedIndex=i;
			}
		}
	}
	//如果有缓存文本，则保持状态
	if(sessionStorage.condition_SearchText_Content){
		$('input[name=search_text_content]').val(sessionStorage.condition_SearchText_Content);
	}else{
		$('#search_text_type').get(0).selectedIndex=0;
	}
</script>




<!--搜索组件-按钮组-->
<div  style='margin:10px 0;border:1px solid #ccc;display:flex;cursor:pointer;'>
	<volist name='search_nav' item='key' id='vo'>
		<div class="search_nav" style='flex:1;text-align:center;border-left:1px solid #ccc;border-right:1px solid #ccc' index='{$key}'>{$vo}</div>
	</volist>
</div>
<script>
	//按钮组点击事件
	search_nav();
	$('.search_nav').click(function(){
		sessionStorage.condition_search_nav=$(this).attr('index');
		search_nav();	
		sessionStorage.condition_pnow=1;
		sessionStorage.condition_area='';
		sessionStorage.condition_class='';
		sessionStorage.condition_price='';
		index_init();
	
	});	
	switch(sessionStorage.condition_search_nav){
		case '1':
		case '3':
			$('.search_select').eq(3).parent().hide();
			$('.search_select').eq(2).parent().show();
		break;
		case '2':
		case '4':
			$('.search_select').eq(2).parent().hide();
			$('.search_select').eq(3).parent().show();
		break;
		default:
			$('.search_select').eq(2).parent().hide();
			$('.search_select').eq(3).parent().hide();
	}
	//根据缓存设置按钮组样式
	function search_nav(){
		//如果没有缓存按钮项,设置默认下标为0
		if(!sessionStorage.condition_search_nav){
			var SearchNav_Index = 0;
		}else{
			//获取缓存的值
			var SearchNav_Val = sessionStorage.condition_search_nav;
			//遍历按钮
			for(var i=0;i<$('.search_nav').length;i++){
				//获取每个按钮的属性值
				var SearchNav_OptionVal = $('.search_nav').eq(i).attr('index');
				//判断缓存值与按钮属性值，相同就记录按钮的下标
				if(SearchNav_Val == SearchNav_OptionVal){
					var SearchNav_Index = i;
				}
			}
		}
		//设置选项按钮的状态
		$('.search_nav').css('background','').css('color','#000');
		$('.search_nav').eq(SearchNav_Index).css('background','blue').css('color','#fff');
	}
</script>







<!--搜索组件-下拉列表-->
<div style='margin:5px 0;display:flex;font-size:15px;height:30px'>
	<volist name='search_select' id='vo' item='key'>
		<div style='flex:1;height:100%'>
			<select style='height:100%;width:100%;text-align:center' class='search_select' key='{$vo.key}' >
				<volist name='vo.list' item='key' id='vo2'>
					<option value='{$key}'>{$vo2}</option>
				</volist>
			</select>
		</div>

	</volist>
</div>

<script>
	//下拉列表选择事件
	$(".search_select").change(function(){
		sessionStorage.condition_pnow=1;
		//获取当前操作的元素在该类元素中的下标
		var search_index = $(this).index('.search_select'); 
		//获取指定下标元素中的属性值 
		var search_select_type = $('.search_select').eq(search_index).attr('key');
		//获取指定下标select元素的选中val值
		var search_select_type_val = $('.search_select').eq(search_index).val();
		//缓存当前选择的类型与值(拼接字串待解析执行)
		var str = 'sessionStorage.'+search_select_type+'='+search_select_type_val;
		//将字串解析并执行
		eval(str);
		var str2 = 'sessionStorage.'+search_select_type;
		index_init();
	});

	//比对缓存中与options的值，保持每个选择的状态
	//遍历指定类的select元素，
	for(var i=0;i<$('.search_select').length;i++){
		//获取每个指定类的select元素的属性key的值
		var keep_key = $('.search_select').eq(i).attr('key');
		//拼接缓存代码的字串
		var keep_str = 'sessionStorage.'+keep_key;
		//解析并执行代码(动态获取每个select元素中属性值为名的缓存)
		var get_sess = eval(keep_str);
		//如果该缓存值存在
		if(get_sess){
			//获取该select元素中的options总数
			var options_length = $('.search_select').get(i).options.length;
			//遍历options
			for(var j=0;j<options_length;j++){
				//获取每个options的value值 
				var get_option_val = $('.search_select').get(i).options[j].value;
				//判断options的值如果与缓存的值相同，且不是首条
				if(get_option_val == get_sess && get_sess!=0){
					//设置该下标的option为默认选项
					$('.search_select').get(i).selectedIndex=j;
				}
			}
		}
	}
</script>









